<template>
    <div>
        <el-breadcrumb separator="/" class="m-b-25">
            <el-breadcrumb-item><a href="/">后台首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>系统设置</el-breadcrumb-item>
        </el-breadcrumb>

        <el-form ref="form" :model="form" label-width="100px" class="m-t-10">
            <el-form-item label="网站主题色">
                <el-input ref="color" v-model="form.web_color" placeholder="请输入主题颜色，格式 #cacaca"></el-input>
            </el-form-item>

            <el-form-item label="登录背景图">
                <el-upload class="bg-uploader" :action="uploadImage" :show-file-list="false"
                    :on-success="handleBgSuccess" :before-upload="beforeImageUpload">
                    <img v-if="bgUrl" :src="bgUrl" class="cover">
                    <i v-else class="el-icon-plus cover"></i>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传 JPG / PNG / BMP / WEBP 文件，且不超过 2MB，建议尺寸 750 x 375
                        </div>
                    </template>
                </el-upload>
            </el-form-item>

            <el-form-item label="轮播图1">
                <el-upload class="bg-uploader" :action="uploadImage" :show-file-list="false" :on-success="handleBanner1"
                    :before-upload="beforeImageUpload">
                    <img v-if="bannerUrl1" :src="bannerUrl1" class="cover">
                    <i v-else class="el-icon-plus cover"></i>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传 JPG / PNG / BMP / WEBP 文件，且不超过 2MB，建议尺寸 750 x 375
                        </div>
                    </template>
                </el-upload>
            </el-form-item>

            <el-form-item label="轮播图2">
                <el-upload class="bg-uploader" :action="uploadImage" :show-file-list="false" :on-success="handleBanner2"
                    :before-upload="beforeImageUpload">
                    <img v-if="bannerUrl2" :src="bannerUrl2" class="cover">
                    <i v-else class="el-icon-plus cover"></i>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传 JPG / PNG / BMP / WEBP 文件，且不超过 2MB，建议尺寸 750 x 375
                        </div>
                    </template>
                </el-upload>
            </el-form-item>

            <el-form-item label="轮播图3">
                <el-upload class="bg-uploader" :action="uploadImage" :show-file-list="false" :on-success="handleBanner3"
                    :before-upload="beforeImageUpload">
                    <img v-if="bannerUrl3" :src="bannerUrl3" class="cover">
                    <i v-else class="el-icon-plus cover"></i>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传 JPG / PNG / BMP / WEBP 文件，且不超过 2MB，建议尺寸 750 x 375
                        </div>
                    </template>
                </el-upload>
            </el-form-item>

            <el-form-item label="文章分类开关">
                <el-switch v-model="form.article" active-color="#13ce66">
                </el-switch>
            </el-form-item>

            <el-form-item label="苹果开关">
                <el-switch v-model="form.iphone" active-color="#13ce66">
                </el-switch>
            </el-form-item>

            <el-form-item label="常见问题">
                <Editor :value="editorValue" @change="changeEditor"></Editor>
            </el-form-item>

            <el-form-item>
                <el-button type="success" @click="submit">保存设置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {
        get,
        post
    } from '@/network/request'
    import Editor from '@/components/Editor'
    import {
        __IMAGE__
    } from '@/main'

    export default {
        name: 'System',
        data() {
            return {
                uploadImage: '',
                form: {
                    login_bg: '',
                    web_color: '',
                    banner1: '',
                    banner2: '',
                    banner3: '',
                    article: true,
                    iphone: false,
                    question: ''
                },
                bgUrl: '',
                bannerUrl1: '',
                bannerUrl2: '',
                bannerUrl3: '',
                editorValue: ''
            }
        },
        components: {
            Editor
        },
        created() {
            this.uploadImage = __IMAGE__
        },
        mounted() {
            this.$nextTick(() => {
                get('/system').then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.form.web_color = result.data.web_color
                        this.form.login_bg = this.bgUrl = result.data.login_bg
                        this.form.banner1 = this.bannerUrl1 = result.data.banner1
                        this.form.banner2 = this.bannerUrl2 = result.data.banner2
                        this.form.banner3 = this.bannerUrl3 = result.data.banner3
                        this.form.article = (result.data.article == 1) ? true : false
                        this.form.iphone = (result.data.iphone == 1) ? true : false
                        this.editorValue = result.data.question
                    }
                }).catch()
            })
        },
        methods: {
            changeEditor(val) {
                this.form.question = val
            },
            handleBgSuccess(res, file) {
                this.form.login_bg = res.data
                this.bgUrl = URL.createObjectURL(file.raw)
            },
            handleBanner1(res, file) {
                this.form.banner1 = res.data
                this.bannerUrl1 = URL.createObjectURL(file.raw)
            },
            handleBanner2(res, file) {
                this.form.banner2 = res.data
                this.bannerUrl2 = URL.createObjectURL(file.raw)
            },
            handleBanner3(res, file) {
                this.form.banner3 = res.data
                this.bannerUrl3 = URL.createObjectURL(file.raw)
            },
            beforeImageUpload(file) {
                if (['image/jpeg', 'image/bmp', 'image/png', 'image/webp'].indexOf(file
                        .type) == -1) {
                    this.$message.error({
                        message: '请上传正确的图片格式！',
                        type: 'error',
                        offset: 80
                    })
                    return false
                }

                const size = file.size / 1024 / 1024 < 2
                if (!size) {
                    this.$message.error({
                        message: '图片大小不能超过 2MB！',
                        type: 'error',
                        offset: 80
                    })
                    return false
                }
            },
            submit() {
                if (this.form.web_color == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入网站主题色',
                        offset: 60
                    })
                    this.$refs['color'].focus()
                    return false
                }
                if (this.form.content == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入通知内容',
                        offset: 60
                    })
                    this.$refs['content'].focus()
                    return false
                }
                post('/modifySystem', this.form).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.$notify.success({
                            title: '系统提示',
                            message: '设置保存成功',
                            offset: 60
                        })
                        this.$router.push('/system')
                    }
                }).catch()
            }
        }
    }
</script>

<style scoped>

</style>